<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
	content="A layout example with a side menu that hides on mobile, just like the Pure website.">

<title>Responsive Side Menu &ndash; Layout Examples &ndash; Pure</title>




<link rel="stylesheet" href="css/pure-min.css">



<!--[if lte IE 8]>
        <link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
    <![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/side-menu.css">
<!--<![endif]-->


</head>
<body>

	<div id="layout">
		<!-- Menu toggle -->
		<a href="#menu" id="menuLink" class="menu-link"> <!-- Hamburger icon -->
			<span></span> </a>

		<div id="menu">
			<div class="pure-menu">
				<a class="pure-menu-heading" href="#">Company</a>

				<ul class="pure-menu-list">
					<li class="pure-menu-item"><a href="#introid"
						class="pure-menu-link">简介</a>
					</li>
					<li class="pure-menu-item"><a href="#hdfsid"
						class="pure-menu-link">HDFS文件查看</a>
					</li>

					<li class="pure-menu-item"
						class="menu-item-divided pure-menu-selected"><a href="#mrid"
						class="pure-menu-link">运行MR任务</a></li>

					<li class="pure-menu-item"><a href="#contactid"
						class="pure-menu-link">Contact</a>
					</li>
				</ul>
			</div>
		</div>

		<div id="main">
			<div class="header">
				<h1>Maven构建Hadoop Web项目</h1>
				<!-- 	<h2>A subtitle for your page goes here</h2> -->
			</div>

			<div class="content" id="introid">
				<h2 class="content-subhead">Demo介绍</h2>
				<p>Maven构建Hadoop Web项目是一个样例Demo，方便开发专注于后台以及Hadoop开发的人员在
					其上构建自己定制的项目。该Demo提供了两个样例：</p>
				<ul>
					<li><a href="#hdfsid">查看HDFS文件目录文件</a></li>
					<li><a href="#mrid">运行MapReduce任务</a></li>
				</ul>
				<div class="pure-g">
					<div class="pure-u-1-4">
						<img class="pure-img-responsive"
							src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg"
							alt="Peyto Lake">
					</div>
				</div>
				<br> <br> <br> <br> <br> <br>
				<h2 class="content-subhead" id="hdfsid">HDFS文件目录查看</h2>
				<p>输入文件目录，点击确定，即可查看到该目录下面的所有文件信息.</p>
				<form class="pure-form">
					<fieldset>

						<input id ="input-hdfs" type="text" placeholder="请输入HDFS路径"> 

						<button class="pure-button" id="btr-hdfs">确认</button>
					</fieldset>
				</form>
				<!-- HDFS的返回信息 -->
				<div id="ret-hdfs"></div>
				<br>
				<div class="pure-g">
					<div class="pure-u-1-4">
						<img class="pure-img-responsive"
							src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg"
							alt="Train">
					</div>
				</div>
				<br> <br> <br> <br> <br> <br>
				<h2 class="content-subhead" id="mrid">运行MR任务</h2>
				<p>请输入HDFS文件输入、输出目录，然后点击确定，即可提交WordCount MR任务.</p>
					
				<form class="pure-form">
					<fieldset>

						<input type="text" id="mr-input" placeholder="HDFS输入路径">
						<br><br>
						<input type="text" id="mr-output" placeholder="HDFS输出路径"> 

						<button class="pure-button" id="btr-mr">确认</button>
					</fieldset>
				</form>
				<!-- MR的返回信息 -->
				<div id="ret-mr"></div>
				<br>
				<div class="pure-g">
					<div class="pure-u-1-4">
						<img class="pure-img-responsive"
							src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg"
							alt="T-Shirt Store">
					</div>

				</div>
				<br> <br> <br> <br> <br> <br>
				<h2 class="content-subhead" id="contactid">Contact</h2>
				<p>
				 Blog: http://blog.csdn.net/fansy1990<br>
				 Mail: fansy1990@foxmail.com
				</p>
				<div class="pure-g">
					<div class="pure-u-1-4">
						<img class="pure-img-responsive"
							src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg"
							alt="Mountain">
					</div>

				</div>
				<br> <br> <br> <br> <br> <br>
			</div>
		</div>
	</div>


	<script src="js/ui.js"></script>
	<script src="js/jquery-1.11.3.min.js"></script>
	<script src="js/actions.js"></script>
	

</body>
</html>
